<template>
	<view class="my-address-container">
		<view class="my-address-item" v-for="(item,index) in data.addressList" :key="index">
			<MeAddressItem :addressItem="item"></MeAddressItem>
		</view>
	</view>
	<view class="my-address-btn-container">
		<button class="my-address-add-btn" @tap="goAdd">新增地址</button>
	</view>
</template>

<script>
	import MeAddressItem from "../../components/me/me-address-item.vue"
	import {onMounted,reactive} from 'vue'
	import global from "../../config/global.js"
	import {onShow} from '@dcloudio/uni-app'
	export default {
		name:"my-address",
		components:{
			MeAddressItem
		},
		setup(){
			let data =  reactive({
				addressList:[]
			})
			
			onShow(()=>{
				getData()
			})
			
			onMounted(()=>{
				getData()
			})
			
			function goAdd(){
				uni.navigateTo({
					url:'/pages/me/me-address-add'
				})
			}
			
			function getData(){
				uni.request({
					method:"GET",
					url:global.BASE_URL+"/user/myaddress",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						// console.log(res)
						if(res.data.code){
							data.addressList = res.data.data
						}else{
							uni.showModal({
								title:'请求失败',
								content:res.data.msg,
								showCancel:false
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			return {
				goAdd,
				data
			}
		}
	}
</script>

<style scoped>
	.my-address-container{
		width: 700rpx;
		margin: 10rpx 25rpx;
		padding-bottom: 140rpx;
	}
	
	.my-address-item{
		width: 700rpx;
	}
	
	.my-address-btn-container{
		position: fixed;
		width: 750rpx;
		height: 80rpx;
		bottom: 40rpx;
	}
	
	.my-address-add-btn{
		width: 400rpx;
		margin: 10rpx 175rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		background-color: #98CDD2;
		color:white;
	}
</style>
